<template>
  <div>
    <div v-clickoutside="hideReplyBtn"
         @click="inputFocus"
         class="my-reply">
      <el-avatar class="header-img"
                 :size="40"
                 :src="myHeader"></el-avatar>
      <div class="reply-info">
        <div tabindex="0"
             contenteditable="true"
             id="replyInput"
             spellcheck="false"
             placeholder="输入评论..."
             class="reply-input"
             @focus="showReplyBtn"
             @input="onDivInput($event)">
        </div>
      </div>
      <div class="reply-btn-box"
           v-show="btnShow">
        <el-button class="reply-btn"
                   size="medium"
                   @click="sendComment"
                   type="primary">发表评论</el-button>
      </div>
    </div>
    <div v-for="(item,i) in comments"
         :key="i"
         class="author-title reply-father">
      <el-avatar class="header-img"
                 :size="40"
                 :src="item.avatar"></el-avatar>
      <div class="author-info">
        <span class="author-name">{{item.account}}</span>
        <span class="author-time">{{item.date}}</span>
        <p>
          <span class="reply">{{item.content}}</span>
        </p>
      </div>
      <div class="icon-btn">
        <span @click="showReplyInput(i,item.account,item.commentid)"><i class="iconfont el-icon-s-comment"></i>{{item.commentnum}}</span>
        <i class="iconfont el-icon-caret-top"
           @click="giveLike(item.commentid)"></i>{{item.liked}}
      </div>
      <div class="talk-box">
        <p>
          <span class="reply">{{item.comment}}</span>
        </p>
      </div>
      <div class="reply-box">
        <div v-for="(reply,j) in item.reply"
             :key="j"
             class="author-title">
          <el-avatar class="header-img"
                     :size="40"
                     :src="reply.avatar"></el-avatar>
          <div class="author-info">
            <span class="author-name">{{reply.account}}</span>
            <span class="author-time">{{reply.date}}</span>
          </div>
          <div class="icon-btn">
            <span @click="showReplyInput(i,reply.account,reply.commentid)"><i class="iconfont el-icon-s-comment"></i>{{reply.commentnum}}</span>
            <i class="iconfont el-icon-caret-top"
               @click="giveLike(reply.commentid)"></i>{{reply.liked}}
          </div>
          <div class="talk-box">
            <p>
              <span>回复 {{reply.parentaccount}}：</span>
              <span class="reply">{{reply.content}}</span>
            </p>
          </div>
          <div class="reply-box">

          </div>
        </div>
      </div>
      <div v-show="_inputShow(i)"
           class="my-reply my-comment-reply">
        <el-avatar class="header-img"
                   :size="40"
                   :src="myHeader"></el-avatar>
        <div class="reply-info">
          <div tabindex="0"
               contenteditable="true"
               spellcheck="false"
               :placeholder="to"
               @input="onDivInput($event)"
               class="reply-input reply-comment-input"></div>
        </div>
        <div class=" reply-btn-box">
          <el-button class="reply-btn"
                     size="medium"
                     @click="sendComment"
                     type="primary">发表回复</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
const clickoutside = {
    // 初始化指令
    bind(el, binding, vnode) {
        function documentHandler(e) {
            // 这里判断点击的元素是否是本身，是本身，则返回
            if (el.contains(e.target)) {
                return false;
            }
            // 判断指令中是否绑定了函数
            if (binding.expression) {
                // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
                binding.value(e);
            }
        }
        // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
        el.vueClickOutside = documentHandler;
        document.addEventListener('click', documentHandler);
    },
    update() {},
    unbind(el, binding) {
        // 解除事件监听
        document.removeEventListener('click', el.vueClickOutside);
        delete el.vueClickOutside;
    }
};
export default {
    name: 'ArticleComment',
    props: ['userid', 'courseid'],
    data() {
        return {
            btnShow: false,
            index: '0',
            comment: '',
            account: '测试',
            likeid: [],
            myHeader: 'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg',
            myId: 2,
            to: '',
            toId: -1,
            comments: []
        };
    },
    directives: { clickoutside },
    created: function () {
        this.getAvatar();
        this.findComments();
    },
    watch: {
        courseid() {
            //  console.log('子组件',this.courseid);
            this.findComments();
        }
    },
    methods: {
      //获取当前头像 
      getAvatar(){
          this.$axios.get('/api/users/findUser/'+this.userid).then(
            (res)=>{
              this.myHeader=res.data.data.avatar
            }
          ).catch();
      },
        //点赞或取消
        giveLike(commentid) {
            let isLiked = this.likeid.indexOf(commentid);
            if (isLiked == -1) {
                this.likeid.push(commentid);
                isLiked = 1;
            } else {
                this.likeid.splice(isLiked, 1);
                isLiked = -1;
            }
            this.$axios
                .put('/api/comment/giveLike' + '/' + commentid + '/' + isLiked)
                .then((res) => {
                    // console.log(res);
                    this.findComments();
                })
                .catch();
        },
        //查询评论
        findComments() {
            this.$axios
                .post('/api/comment/findComments', { userid: this.userid, courseid: this.courseid })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.comments = res.data.data;
                        for (let i = 0; i < this.comments.length; i++) {
                            this.$set(this.comments[i], 'inputShow', false);
                        }
                    }
                })
                .catch();
        },
        inputFocus() {
            var replyInput = document.getElementById('replyInput');
            replyInput.style.padding = '8px 8px';
            replyInput.style.border = '2px solid blue';
            replyInput.focus();
        },
        showReplyBtn() {
            this.toId = null;
            this.btnShow = true;
        },
        hideReplyBtn() {
            var replyInput = document.getElementById('replyInput');
            this.btnShow = false;
            replyInput.style.padding = '10px';
            replyInput.style.border = 'none';
        },
        showReplyInput(i, name, commentid) {
            this.comments[this.index].inputShow = false;
            this.index = i;
            this.comments[i].inputShow = true;
            this.to = '@ ' + name;
            this.toId = commentid;
            // console.log(name, commentid);
        },
        _inputShow(i) {
            return this.comments[i].inputShow;
        },
        sendComment() {
            if (!this.content) {
                this.$message({
                    showClose: true,
                    type: 'warning',
                    message: '评论不能为空'
                });
            } else {
                let comment = {};
                let input = document.getElementById('replyInput');
                let inputs = document.getElementsByClassName('reply-comment-input');
                let timeNow = new Date().getTime();
                let time = this.dateStr(timeNow);
                comment.account = this.account;
                comment.content = this.content;
                comment.avatar = this.myHeader;
                comment.parentid = this.toId;
                comment.courseid = this.courseid;
                comment.userid = this.userid;
                //comment.date = time;
                //comment.commentnum = 0;
                //comment.like = 0;
                // this.comments.push(comment);
                this.content = '';
                input.innerHTML = '';
                for (let i = 0; i < inputs.length; i++) {
                    inputs[i].innerHTML = '';
                }

                //console.log(comment);
                this.$axios
                    .post('/api/comment/CreateComments', comment)
                    .then((res) => {
                        if (res.data.code == 200) {
                            this.$message({
                                showClose: true,
                                type: 'success',
                                message: '评论成功'
                            });
                            this.findComments();
                        }
                    })
                    .catch();
            }
        },
        sendCommentReply(i, j) {
            if (!this.content) {
                this.$message({
                    showClose: true,
                    type: 'warning',
                    message: '评论不能为空'
                });
            } else {
                let a = {};
                let timeNow = new Date().getTime();
                let time = this.dateStr(timeNow);
                a.from = this.myName;
                a.to = this.to;
                a.fromHeadImg = this.myHeader;
                a.comment = this.content;
                a.time = time;
                a.commentNum = 0;
                a.like = 0;
                this.comments[i].reply.push(a);
                this.content = '';
                document.getElementsByClassName('reply-comment-input')[i].innerHTML = '';
            }
        },
        onDivInput: function (e) {
            this.content = e.target.innerHTML;
        },
        dateStr(date) {
            //获取js 时间戳
            var time = new Date().getTime();
            //去掉 js 时间戳后三位，与php 时间戳保持一致
            time = parseInt((time - date) / 1000);
            //存储转换值
            var s;
            if (time < 60 * 10) {
                //十分钟内
                return '刚刚';
            } else if (time < 60 * 60 && time >= 60 * 10) {
                //超过十分钟少于1小时
                s = Math.floor(time / 60);
                return s + '分钟前';
            } else if (time < 60 * 60 * 24 && time >= 60 * 60) {
                //超过1小时少于24小时
                s = Math.floor(time / 60 / 60);
                return s + '小时前';
            } else if (time < 60 * 60 * 24 * 30 && time >= 60 * 60 * 24) {
                //超过1天少于30天内
                s = Math.floor(time / 60 / 60 / 24);
                return s + '天前';
            } else {
                //超过30天ddd
                var date = new Date(parseInt(date));
                return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
            }
        }
    }
};
</script>
<style>
.my-reply {
    padding: 10px;
    background-color: #fafbfc;
}
.my-reply .header-img {
    display: inline-block;
    vertical-align: top;
}
.my-reply .reply-info {
    display: inline-block;
    margin-left: 5px;
    width: 90%;
}
@media screen and (max-width: 1200px) {
    .my-reply .reply-info {
        width: 80%;
    }
}
.my-reply .reply-info .reply-input {
    min-height: 20px;
    line-height: 22px;
    padding: 10px 10px;
    color: #ccc;
    background-color: #fff;
    border-radius: 5px;
}
.my-reply .reply-info .reply-input:empty:before {
    content: attr(placeholder);
}
.my-reply .reply-info .reply-input:focus:before {
    content: none;
}
.my-reply .reply-info .reply-input:focus {
    padding: 8px 8px;
    border: 2px solid #00f;
    box-shadow: none;
    outline: none;
}
.my-reply .reply-btn-box {
    height: 25px;
    margin: 10px 0;
}
.my-reply .reply-btn-box .reply-btn {
    position: relative;
    float: right;
    margin-right: 15px;
}
.my-comment-reply {
    margin-left: 50px;
}
.my-comment-reply .reply-input {
    width: flex;
}
.author-title:not(:last-child) {
    border-bottom: 1px solid rgba(178, 186, 194, 0.3);
}
.author-title {
    padding: 10px;
}
.author-title .header-img {
    display: inline-block;
    vertical-align: top;
}
.author-title .author-info {
    display: inline-block;
    margin-left: 5px;
    width: 60%;
    height: 40px;
    line-height: 20px;
}
.author-title .author-info > span {
    display: block;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.author-title .author-info .author-name {
    color: #000;
    font-size: 18px;
    font-weight: bold;
}
.author-title .author-info .author-time {
    font-size: 14px;
}
.author-title .icon-btn {
    width: 30%;
    padding: 0 !important;
    float: right;
}
@media screen and (max-width: 1200px) {
    .author-title .icon-btn {
        width: 20%;
        padding: 7px;
    }
}
.author-title .icon-btn > span {
    cursor: pointer;
}
.author-title .icon-btn .iconfont {
    margin: 0 5px;
}
.author-title .talk-box {
    margin: 0 50px;
}
.author-title .talk-box > p {
    margin: 0;
}
.author-title .talk-box .reply {
    font-size: 16px;
    color: #000;
}
.author-title .reply-box {
    margin: 10px 0 0 50px;
    background-color: #efefef;
}
</style>